<template>
  <n-grid :x-gap="20">
    <n-grid-item :span="18">
      <LoadingGroup :error="error" :is-empty="rows.length === 0" :pending="pending">

        <TestparperList v-for="(item,index) in rows" :key="index" :item="item" />

        <div class="flex justify-center items-center mt-5 mb-10">
          <n-pagination
              :item-count="total"
              :on-update:page="handlePageChange"
              :page="page"
              :page-size="limit"
              size="large"
          />
        </div>
      </LoadingGroup>
    </n-grid-item>

    <n-grid-item :span="6">
      <HotCourseList/>
    </n-grid-item>
  </n-grid>
</template>

<script setup>
// 引入naive-ui组件
import {NGrid, NGridItem, NPagination} from "naive-ui"


const {
  page,
  limit,
  total,
  rows,
  handlePageChange,
  pending,
  error,
  refresh,
} = await usePage(({page, limit}) => {
  return useListApi("testpaper", {
    page
  })
});


// 导航栏标题
useHead({
  title: "考试列表"
})


</script>
